<template>
  <a-drawer v-model:visible="state.config.visible" @close="close()" v-bind="state.config">
    <template #title>
      <div style="text-align: center;">{{state.titleTxt}}委托案例资料</div>
    </template>
    <div class="w-full h-full" v-if="!state.config.loading">
      <a-form class="flex flex-col h-full bbcc" ref="formRef" :model="formData" v-bind="state.form" @finish="onSubmit">
        <div class="h-full p-6 pb-20 overflow-y-auto">
          <div class="grid grid-cols-3 gap-2">
            <a-form-item label="确认单号" name="a" :rules="[{ required: false, message: '请填写'}]">
              <d-input :disabled="true" v-model:value="formData.a" />
            </a-form-item>

            <a-form-item label="序号" name="b" :rules="[{ required: false, message: '请填写'}]">
              <d-input :disabled="true" v-model:value="formData.b" />
            </a-form-item>

            <a-form-item label="系统代号" name="c" :rules="[{ required: false, message: '请填写'}]">
              <d-select :disabled="state.modelType===2?true:false" :search="true" v-model:value="formData.c" />
            </a-form-item>

            <a-form-item label="系统名称" name="d" :rules="[{ required: false, message: '请填写'}]">
              <d-input :disabled="true" v-model:value="formData.d" />
            </a-form-item>

            <a-form-item label="程序代号" name="e" :rules="[{ required: false, message: '请填写'}]">
              <d-select :disabled="state.modelType===2?true:false" :search="true" v-model:value="formData.e" />
            </a-form-item>

            <a-form-item label="程序名称" name="f" :rules="[{ required: false, message: '请填写'}]">
              <d-input :disabled="true" v-model:value="formData.f" />
            </a-form-item>

            <a-form-item label="程序状态" name="g" :rules="[{ required: false, message: '请填写'}]">
              <d-select :disabled="state.modelType===2?true:false" :search="true" v-model:value="formData.g" />
            </a-form-item>

            <a-form-item label="程序类型" name="h" :rules="[{ required: false, message: '请填写'}]">
              <d-select :disabled="state.modelType===2?true:false" :search="true" v-model:value="formData.h" />
            </a-form-item>

            <a-form-item label="修改类型" name="i" :rules="[{ required: false, message: '请填写'}]">
              <d-select :disabled="state.modelType===2?true:false" :search="true" v-model:value="formData.i" />
            </a-form-item>

            <a-form-item label="派工类型" name="j" :rules="[{ required: false, message: '请填写'}]">
              <d-select :disabled="state.modelType===2?true:false" :search="true" v-model:value="formData.j" />
            </a-form-item>

            <a-form-item label="是否急单" name="k" :rules="[{ required: false, message: '请填写'}]">
              <d-radio :disabled="state.modelType===2?true:false" v-model:value="formData.k"
                :options="[{value:'是',label:'是'},{value:'否',label:'否'}]" />
            </a-form-item>

            <a-form-item label="是否集成" name="l" :rules="[{ required: false, message: '请填写'}]">
              <d-radio :disabled="state.modelType===2?true:false" v-model:value="formData.l"
                :options="[{value:'是',label:'是'},{value:'否',label:'否'}]" />
            </a-form-item>

            <a-form-item label="是否规格代工" name="m" :rules="[{ required: false, message: '请填写'}]">
              <d-radio :disabled="state.modelType===2?true:false" v-model:value="formData.m"
                :options="[{value:'是',label:'是'},{value:'否',label:'否'}]" />
            </a-form-item>

            <a-form-item label="预计出货日" name="n" :rules="[{ required: false, message: '请填写'}]">
              <d-time :disabled="state.modelType===2?true:false" v-model:value="formData.n" />
            </a-form-item>

            <a-form-item label="软工预交日" name="o" :rules="[{ required: false, message: '请填写'}]">
              <d-time :disabled="state.modelType===2?true:false" v-model:value="formData.o" />
            </a-form-item>

            <a-form-item label="软代出货日" name="p" :rules="[{ required: false, message: '请填写'}]">
              <d-time :disabled="state.modelType===2?true:false" v-model:value="formData.p" />
            </a-form-item>

            <a-form-item label="核心流程" name="q" :rules="[{ required: false, message: '请填写'}]">
              <d-select :disabled="state.modelType===2?true:false" v-model:value="formData.q" />
            </a-form-item>

            <a-form-item label="流程名称" name="r" :rules="[{ required: false, message: '请填写'}]">
              <d-input :disabled="true" v-model:value="formData.r" />
            </a-form-item>

            <a-form-item label="软代是否撰写" name="s" :rules="[{ required: false, message: '请填写'}]">
              <d-radio :disabled="state.modelType===2?true:false" v-model:value="formData.s"
                :options="[{value:'是',label:'是'},{value:'否',label:'否'}]" />
            </a-form-item>

            <a-form-item label="是否请款" name="t" :rules="[{ required: false, message: '请填写'}]">
              <d-radio :disabled="state.modelType===2?true:false" v-model:value="formData.t"
                :options="[{value:'是',label:'是'},{value:'否',label:'否'}]" />
            </a-form-item>

            <a-form-item label="是否对账" name="u" :rules="[{ required: false, message: '请填写'}]">
              <d-radio :disabled="state.modelType===2?true:false" v-model:value="formData.u"
                :options="[{value:'是',label:'是'},{value:'否',label:'否'}]" />
            </a-form-item>

            <a-form-item label="合计时数-客户" name="v" :rules="[{ required: false, message: '请填写'}]">
              <d-number v-model:value="formData.v" />
            </a-form-item>

            <a-form-item label="免费时数-客户" name="w" :rules="[{ required: false, message: '请填写'}]">
              <d-number v-model:value="formData.w" />
            </a-form-item>

            <a-form-item label="计费时数-客户" name="x" :rules="[{ required: false, message: '请填写'}]">
              <d-number v-model:value="formData.x" />
            </a-form-item>

            <a-form-item label="内部委托时数-代工" name="y" :rules="[{ required: false, message: '请填写'}]">
              <d-number v-model:value="formData.y" />
            </a-form-item>
          </div>
          <div class="grid grid-cols-1 gap-2">
            <a-form-item label="规格说明" name="ff" :rules="[{ required: false, message: '请填写'}]">
              <d-textarea :disabled="state.modelType===2?true:false" v-model:value="formData.ff" />
            </a-form-item>
            <a-form-item label="派工备注" name="gg" :rules="[{ required: false, message: '请填写'}]">
              <d-textarea :disabled="state.modelType===2?true:false" v-model:value="formData.gg" />
            </a-form-item>

          </div>

        </div>

      </a-form>
    </div>
    <div v-else class="flex-center">
      <a-spin />
    </div>
    <template #footer>
      <div class="p-3" style="text-align: right;" v-if="state.modelType !== 2">
        <a-space :size="10">
          <a-button type="primary" @click="onSubmit">提交</a-button>
          <!-- <a-button @click="closeModel">取消</a-button> -->
        </a-space>
      </div>
    </template>
  </a-drawer>
</template>
  <script setup>
const emits = defineEmits(["save"]);
const state = reactive({
  form: XEUtils.clone(formConfig, true), //表单配置
  config: XEUtils.clone(drawerConfig, true), //窗口配置
  formRef: null, //表单实例
  formData: {}, //表单数据
  modelType: 0, //0-新增 1-编辑 2-详情
  datas: {},
  titleTxt:"新增"
  //   customCheck, //为空校验
  //   pattern, //正则库
  //   options: [
  //     {
  //       label: "苹果",
  //       value: "苹果"
  //     },
  //     { label: "西瓜", value: "西瓜" }
  //   ]
});

//提交
const onSubmit = () => {
  state.formRef.validateFields().then(values => {
    close();
  });
};
//查看
async function viewFun(datas) {
  state.config.loading = false;
  state.formData = XEUtils.clone(datas, true);
}
//创建
async function createFun() {
  state.titleTxt = "新增"
  state.config.loading = false;
}
//编辑
async function saveFun(datas) {
  state.titleTxt = "编辑"
  state.config.loading = false;
  let dataNew = XEUtils.clone(datas, true);
  state.formData = dataNew;
}
//关闭
function close() {
  state.formRef.clearValidate();
  state.formData = {};
  state.config.visible = false;
}
//初始化
function openModel(type = 0, datas = null) {
  // 公共配置
  state.config.width = 950;
  state.modelType = type;
  state.config.visible = true;
  state.config.loading = true;
  //新增|编辑|详情
  type === 0 ? createFun() : type === 1 ? saveFun(datas) : viewFun(datas);
}
// 常用
watch(
  () => state,
  newArr => {},
  { deep: true, immediate: true }
);

//导出
defineExpose({
  openModel
});
const { formRef, formData } = toRefs(state);
</script>